<template>
    <div class="login-page">
        <suc-form class="login-form" :config="formConfig">
            <suc-form-item :config="formItem[0]">
                <suc-input v-model="model.username" />
            </suc-form-item>
            <suc-form-item :config="formItem[1]">
                <suc-input v-model="model.password" type="password" />
            </suc-form-item>
            <suc-form-item>
                <suc-button @click="login">登录</suc-button>
            </suc-form-item>
        </suc-form>
    </div>
</template>

<script lang="ts">
import { login } from "@/api/waterloo";
import { AuthModel } from "@/models/waterloo";
import { SucButton, SucForm, SucFormItem, SucInput } from "@suc/ui";
import { FormConfig, FormItemConfig } from "@suc/ui/interfaces";
import { Component, Vue } from "vue-property-decorator";

@Component({
    components: {
        SucForm,
        SucFormItem,
        SucInput,
        SucButton
    }
})
export default class Login extends Vue {
    model: AuthModel = {
        username: "",
        password: ""
    };

    formConfig: FormConfig = {
        "label-position": "left",
        "label-width": 100
    };

    formItem: FormItemConfig[] = [
        {
            label: "用户名"
        },
        {
            label: "密码"
        }
    ];

    async login() {
        try {
            await login(this.model);
            await this.$router.push({ name: "home" });
        } catch (e) {
            this.$SucMessage.error("登录失败");
            console.log(e);
        }
    }

    mounted() {}
}
</script>

<style lang="scss" scoped>
.login-page {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../assets/login-bg.svg");
    background-size: cover;

    .login-form {
        box-shadow: 0 0 5px #eeeeee;
        padding: 48px 48px 24px 48px;
        background-color: #ffffff;
    }
}
</style>